<template>
  <view class="index-container">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="institution-info">
        <text class="institution-name">艺术光艺术中心 (示例)</text>
        <text class="arrow-right">></text>
      </view>
      <view class="top-icons">
        <text class="icon">🎵</text>
        <text class="icon">•••</text>
        <text class="icon">🔔</text>
      </view>
    </view>

    <!-- 功能菜单区 -->
    <view class="menu-section">
      <view class="menu-row">
        <view class="menu-item" @click="handleStudentManagement">
          <view class="menu-icon">👥</view>
          <text class="menu-label">学员管理</text>
        </view>
        <view class="menu-item">
          <view class="menu-icon">🏫</view>
          <text class="menu-label">班级管理</text>
        </view>
        <view class="menu-item" @click="handleCourseManagement">
          <view class="menu-icon">📚</view>
          <text class="menu-label">课程管理</text>
        </view>
        <view class="menu-item" @click="handleSchedule">
          <view class="menu-icon">📅</view>
          <text class="menu-label">课表管理</text>
        </view>
      </view>

      <view class="menu-row">
        <view class="menu-item" @click="handleFeedback">
          <view class="menu-icon">✅</view>
          <text class="menu-label">课后回馈</text>
        </view>
        <view class="menu-item">
          <view class="menu-icon">📝</view>
          <text class="menu-label">上课记录</text>
        </view>
        <view class="menu-item">
          <view class="menu-icon">📋</view>
          <text class="menu-label">报名/续费</text>
        </view>
        <view class="menu-item">
          <view class="menu-icon">📦</view>
          <text class="menu-label">订单管理</text>
        </view>
      </view>

      <view class="menu-row">
        <view class="menu-item">
          <view class="menu-icon">💰</view>
          <text class="menu-label">收支明细</text>
        </view>
        <view class="menu-item">
          <view class="menu-icon">💳</view>
          <text class="menu-label">优米收银</text>
        </view>
        <view class="menu-item">
          <view class="menu-icon">📊</view>
          <text class="menu-label">课消记录</text>
        </view>
        <view class="menu-item">
          <view class="menu-icon">⋮⋮</view>
          <text class="menu-label">更多</text>
        </view>
      </view>
    </view>

    <!-- 今日待点名区 -->
    <view class="attendance-section">
      <view class="section-header">
        <text class="section-title">今日待点名</text>
      </view>
      <view class="attendance-list">
        <view class="attendance-item" v-for="course in todayCourses" :key="course.id">
          <view class="attendance-content">
            <view class="attendance-time">{{ course.time }}</view>
            <view class="attendance-course">{{ course.courseName }}</view>
            <view class="attendance-location">{{ course.location }}</view>
          </view>
          <button class="attendance-button" type="primary" size="mini" @click="handleAttendance(course)">去点名</button>
        </view>
        <view class="empty-attendance" v-if="todayCourses.length === 0">
          <text class="empty-text">今日暂无待点名课程</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // 日期工具函数
  const formatDate = (date, format) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    
    return format
      .replace('YYYY', year)
      .replace('MM', month)
      .replace('DD', day)
      .replace('HH', hours)
      .replace('mm', minutes)
      .replace('ss', seconds)
  }
  
  // 获取当前周数
  const getWeekNumber = (date) => {
    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
    const dayNum = d.getUTCDay() || 7
    d.setUTCDate(d.getUTCDate() + 4 - dayNum)
    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
    return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
  }
  
  // 获取星期几的英文小写
  const getDayOfWeek = (date) => {
    const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
    return days[date.getDay()]
  }
  
  // 比较时间
  const compareTime = (timeStr1, timeStr2) => {
    const [h1, m1] = timeStr1.split(':').map(Number)
    const [h2, m2] = timeStr2.split(':').map(Number)
    if (h1 !== h2) return h1 - h2
    return m1 - m2
  }

  import request from '../utils/request'

  export default {
    data() {
      return {
        // 今日待点名课程列表
        todayCourses: [],
        // 默认课程时间配置
        defaultData: [
          { time: '09:00-10:30' },
          { time: '10:30-12:00' },
          { time: '13:30-15:00' },
          { time: '15:00-16:30' },
          { time: '16:30-18:00' },
          { time: '18:00-19:30' }
        ]
      }
    },
    onLoad() {
      // 加载今日待点名课程
      this.loadTodayCourses()
    },
    onShow() {
      // 页面显示时刷新课程列表
      this.loadTodayCourses()
    },
    methods: {
      // 加载今日待点名课程
      loadTodayCourses() {
        const data = {}
        const now = new Date()
        data.year = now.getFullYear()
        data.week = getWeekNumber(now)
        data.day = getDayOfWeek(now)
        
        // 调用后端接口获取今日课程
        request({
          url:'/ysg/work/getTodayCourses',
          data:data,
          method:'POST'
        }).then(res => {
          if (res.code === 200 && res.data) {
            this.todayCourses = res.data.map(course => {
              return {
                ...course,
                time: this.defaultData[course.sort - 1].time
              }
            })
          }
        }).catch(error => {
          console.warn('获取今日课程失败', error)
          // 使用模拟数据
          this.todayCourses = [
            {
              id: 1,
              courseId: 1,
              courseName: '3-5岁色彩启蒙班 (示例)',
              location: '色彩空间教室 (示例)',
              className: '绘画初级课程',
              classId: 1,
              sort: 3,
              time: '14:00 ~ 15:00'
            },
            {
              id: 2,
              courseId: 2,
              courseName: '5-7岁硬笔书法启蒙班 (示例)',
              location: '墨韵堂教室 (示例)',
              className: '书法课程',
              classId: 2,
              sort: 4,
              time: '16:00 ~ 17:00'
            },
            {
              id: 3,
              courseId: 3,
              courseName: '活力少年综合体能适能班 (示例)',
              location: '跃动广场 (示例)',
              className: '体能课程',
              classId: 3,
              sort: 6,
              time: '19:00 ~ 20:00'
            }
          ]
        })
      },
      // 处理点名操作
      handleAttendance(course) {
        // 跳转到点名页面
        this.$tab.navigateTo(
           `/pages/work/attendance?courseId=${course.courseId}&courseName=${course.courseName}&time=${course.time}&location=${course.location}&className=${course.className}&classId=${course.classId}&sort=${course.sort}`
        )
      },
      // 处理点名菜单点击
      handleAttendanceMenu() {
        // 跳转到点名页面
        this.$tab.navigateTo('/pages/work/attendance')
      },
      // 处理课后回馈
      handleFeedback() {
        // 跳转到课后回馈页面
        this.$tab.navigateTo('/pages/work/feedback')
      },
      // 处理学员管理
      handleStudentManagement() {
        // 跳转到学员管理页面
        this.$tab.navigateTo('/pages/work/student-management')
      },
      // 处理课程管理
      handleCourseManagement() {
        // 跳转到课程管理页面
        this.$tab.navigateTo('/pages/work/course-management')
      },
      // 处理课表管理
      handleSchedule() {
        // 跳转到课表管理页面
        this.$tab.navigateTo('/pages/work/schedule')
      }
    }
  }
</script>

<style scoped>
  /* 全局样式 */
  .index-container {
    background: linear-gradient(180deg, #ff9a00 0%, #ff6b00 33.33%, #f8f9fa 33.33%, #f8f9fa 100%);
    min-height: 100vh;
    padding-bottom: 0;
  }

  /* 顶部导航栏 */
  .top-nav {
    background-color: transparent;
    padding: 38px 16px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
  }

  .institution-info {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .institution-name {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
  }

  .arrow-right {
    font-size: 14px;
    color: #ffffff;
  }

  .top-icons {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .icon {
    font-size: 18px;
    color: #ffffff;
  }

  /* 功能菜单区 */
  .menu-section {
    background-color: #ffffff;
    margin: 8px 12px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .menu-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .menu-row:last-child {
    margin-bottom: 0;
  }

  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 8px;
  }

  .menu-icon {
    font-size: 28px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f9ff;
    border-radius: 12px;
    color: #3b82f6;
  }

  .menu-label {
    font-size: 13px;
    color: #333;
    text-align: center;
    font-weight: 500;
  }

  /* 今日待点名区 */
  .attendance-section {
    background-color: #ffffff;
    margin: 12px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .section-header {
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .attendance-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .attendance-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    gap: 12px;
  }

  .attendance-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .attendance-time {
    font-size: 15px;
    font-weight: bold;
    color: #3b82f6;
  }

  .attendance-course {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  .attendance-location {
    font-size: 13px;
    color: #666;
  }

  .attendance-button {
    margin-top: 4px;
    flex-shrink: 0;
  }

  .empty-attendance {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
  }

  .empty-text {
    display: block;
  }
</style>
